<template>
  <el-drawer title="预览商品" size="25%" v-model="visible">
    <div class="w-100% h-100% flex justify-center items-center">
      <div class="flex items-center justify-center overflow-hidden view-box ">
        <div class="w-86% h-90% mt-6 iframe-box">
          <iframe
            :key="iframeKey"
            frameborder="0"
            :src="
              `https://${selePromotionLink}/#/product?id=${selectProductId}` +
              '&tenantId=' +
              getTenantId()
            "
            width="100%"
            height="100%"
            ></iframe>
            <!-- :src="'http://172.17.13.177:81/#/product?id=' + selectProductId + '&tenantId=' + getTenantId()" -->
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { getAccessToken, getTenantId } from '@/utils/auth'

const visible = ref(false)
const selectProductId = ref(undefined)
const iframeKey = ref(0)
const selePromotionLink = ref('')
const show = (id,promotionLink) => {
  visible.value = true
  selectProductId.value = id
  selePromotionLink.value = promotionLink
  console.log(selectProductId.value,'selectProductId.value');
  console.log(selePromotionLink.value,'selePromotionLink.value');
  console.log(`https://${selePromotionLink.value}/#/product?id=${selectProductId.value}` +
    '&tenantId=' +
    getTenantId(),
    'iframe src');
  
}
watch(selectProductId, (newVal) => {
  if (newVal) {
    iframeKey.value++ // 改变 key 值强制重新渲染
  }
})
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.view-box {
  background: url('https://img.alicdn.com/imgextra/i2/801089336/O1CN011bkKzC2IpwkkKL6aL_!!801089336.png')
    no-repeat no-repeat;
  background-size: contain;
  background-position: center center;
  width: 380PX;
  height: 822PX;
  .iframe-box {
    // background-color: #ccc;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
  }
}
</style>
